<!DOCTYPE html>
<html lang="is">
    <head>
        <meta charset="ISO-8859-1" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>School App</title>
		<link href="Content/Site.css" type="text/css" rel="stylesheet">
		<link rel="stylesheet" href="Content/default/default.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="Content/nivo-slider.css" type="text/css" media="screen" />
        <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" ></script>
        <script src="Scripts/kinetic-v3.9.4.js" type="text/javascript" ></script>
        <script>
			$(document).ready(function () {
				$(document).ready(function () {
					$("#container").fadeIn("slow");
				});
			});
		
            function isNearOutline(taska, goal) {
                var a = taska;
                var o = goal;
                if(a.attrs.x > o.x - 20 && a.attrs.x < o.x + 20 && a.attrs.y > o.y - 40 && a.attrs.y < o.y + 40) {
                    return true;
                }
                else {
                    return false;
               }
            }

            window.onload = function() {
                var stage = new Kinetic.Stage({
                    container: "container",
                    width: 1000,
                    height: 700
                });
                var layer = new Kinetic.Layer();
                var goals = {
                    myndmennt: {
                        url: "myndmennt.html", x : 175, y : 340
                    },
					smidi: {
                        url: "smidi.html", x: 620, y : 480
                    },
					hurd: {
                        url: "index.html", x: 790, y : 350
                    },
                    hljod: {
                        name: "hljod", x: 795, y : 90
                    }
                };
                var skolataskaImg = new Image();
                skolataskaImg.onload = function() {
                    var skolataska = new Kinetic.Image({
                        image: skolataskaImg,
                        x: 850,
                        y: 550,
                        draggable: true
                    });

                    layer.add(skolataska);
                    stage.add(layer);

                    // add cursor styling
                    skolataska.on("mouseover", function() {
                        layer.draw();
                        document.body.style.cursor = "pointer";
                    });
                    skolataska.on("mouseout", function() {
                        layer.draw();
                        document.body.style.cursor = "default";
                    });
                    skolataska.on("dragend", function() {
                        for (var key in goals) {
                            var currentGoal = goals[key];
                            if(isNearOutline(skolataska, goals[key])) {
                                if (currentGoal.name == 'hljod') {
                                    var audioElem = document.getElementById('audioPlayer');
                                    audioElem.play();
                                }else {
                                    window.location.href = goals[key].url;
                                }
                            }
                        }
                    });
                };
                skolataskaImg.src = "Images/skolataska_medium.png";
				
				/*var testImg = new Image();
                testImg.onload = function() {
                    var testMynd = new Kinetic.Image({
                        image: testImg,
                        x: 790,
                        y: 350,
                        draggable: true
                    });

                    layer.add(testMynd);
                    stage.add(layer);

                    // add cursor styling
                    testMynd.on("mouseover", function() {
                        layer.draw();
                        document.body.style.cursor = "pointer";
                    });
                    testMynd.on("mouseout", function() {
                        layer.draw();
                        document.body.style.cursor = "default";
                    });
                    testMynd.on("dragend", function() {
                        for (var key in goals) {
                            if(isNearOutline(testMynd, goals[key])) {
                                window.location.href = goals[key].url;
                            }
                        }
                    });
                };
                testImg.src = "Images/testImg.png";*/
            };
        </script>
    </head>
    <body onmousedown="return false;">
	
		<div class="leftContainer">
            <div id="container"></div>
		</div>
        <div id="player">
            <audio id="audioPlayer">
                <source id="velkomin" src="Audio/GETUR-VALID-STOFU.mp3" type="audio/mpeg" />
            </audio>
        </div>
    </body>
</html>














